<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 1000px;
            height: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="a" id="a"></div>

<script crossorigin="anonymous" integrity="sha384-i+fXrQ+G3+h2478EWpSpIXivtKbbze+0SNOXJGizkAp6DVG/m2fE6hiWeDwskVvp" src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script>
<script>
    var myChart=echarts.init(document.getElementById('a'));
    //$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {

    var img ='image://avatar.jpg';
    var data = {
        "children":[
            {
                "children":[
                    {
                        "name": "人物1"
                        ,"symbolSize": [60, 80],
                        "symbol":img
                    }
                ],"name":"分类一"
            },
            {
                "children":[
                    {
                        "name": "人物2"
                        ,"symbolSize": [60, 80],
                        "symbol":img
                    },
                    {
                        "name": "人物3"
                        ,"symbolSize": [60, 80],
                        "symbol":img
                    },
                    {
                        "name": "人物4"
                        ,"symbolSize": [60, 80],
                        "symbol":img
                    }
                ],"name":"分类二"
            }
        ]
        ,"name":"toutou"
        // ,"symbolSize":[60, 80],
        // "symbol":img
        ,itemStyle: {
            color: {
                image: img, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
            }
        }
    };

    // myChart.showLoading();    //显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id'));
    //     myChart.hideLoading();    //得到数据后隐藏Loading标志

        myChart.setOption(option = {
            tooltip: {    //提示框组件
                trigger: 'item',    //触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
                triggerOn: 'mousemove'    //提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：
            },
            series: [    //系列列表
                {
                    type: 'tree',    //树形结构

                    data: [data],    //上面从flare.json中得到的数据

                    top: '1%',       //距离上
                    left: '7%',      //左
                    bottom: '1%',    //下
                    right: '20%',    //右的距离

                    symbolSize: 7,   //标记的大小，就是那个小圆圈，默认7

                    label: {         //每个节点所对应的标签的样式
                        normal: {
                            position: 'left',       //标签的位置
                            verticalAlign: 'middle',//文字垂直对齐方式，默认自动。可选：top，middle，bottom
                            align: 'right',         //文字水平对齐方式，默认自动。可选：top，center，bottom
                            fontSize: 9             //标签文字大小
                        }
                    },

                    leaves: {    //叶子节点的特殊配置，如上面的树图示例中，叶子节点和非叶子节点的标签位置不同
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },

                    expandAndCollapse: true,    //子树折叠和展开的交互，默认打开
                    animationDuration: 550,     //初始动画的时长，支持回调函数,默认1000
                    animationDurationUpdate: 750//数据更新动画的时长，默认300
                }
            ]
        });


</script>
</body>
</html>